<template>
 <div>
     <h2>商品展示</h2>
     <table>
         <tr>
             <td>ID</td>
             <td>名称</td>
             <td>价格</td>
             <td>图片</td>
             <td>点击量</td>
         </tr>
         <tr v-for="i in goods_list" :key='i.id'>
             <td>{{i.id}}</td>
             <td>
                 <router-link :to="'/details?id='+i.id">{{i.name}}</router-link>
             </td>
             <td>{{i.price}}</td>
             <td>
                 <img :src='baseUrl+ i.img' width="80px" height="80px">
             </td>
             <td>{{i.count}}</td>
         </tr>
     </table>
         <button v-if="previous" @click="pagx(p-1)">上一页</button>
         <button v-for="i in page" :key='i' @click="pagx(i)">{{i}}</button>
         <button v-if='next' @click="pagx(p+1)">下一页</button>
 </div>
</template>

<script>
 export default {
   data () {
     return {
         goods_list:[],
         page:[],
         previous:false,
         next:false,
         p:1,
         baseUrl:'http://127.0.0.1:8000',
     };
   },
   methods: {
       pagx:function(p){
           this.p=p;
           this.axios({
                url:'http://127.0.0.1:8000/app01/goods/',
                method:'get',
                params:{p:this.p}
            }).then(res=>{
                this.goods_list=res.data.data.data;
                this.page=res.data.data.page;
                this.previous=res.data.data.previous;
                this.next=res.data.data.next;
       })

       }
   },
   mounted(){
       this.axios({
           url:'http://127.0.0.1:8000/app01/goods/',
           method:'get',
           params:{p:this.p}
       }).then(res=>{
           this.goods_list=res.data.data.data;
           this.page=res.data.data.page;
           this.previous=res.data.data.previous;
           this.next=res.data.data.next;
       })
 }
   }
</script>

<style>

 
</style>
